<template>
  <div class="dis-ib">
    <el-popover class="emojiShow" placement="top-start" :width="26*15+13*2" trigger="click" v-model="tools[0].isActive">
      <div class="emojiShow">
        <template v-for="(v,i) in emojiList">
          <div class="img-box" :key="i" @click="addEmoji(v)">
            <img class="img-inline" :src="v.img" :alt="v.txt">
          </div>
        </template>
      </div>
      <button slot="reference" :class="['btn','iconfont',tools[0].icon,tools[0].isActive?'active':'']">
        {{ tools[0].txt }}
      </button>
    </el-popover>
    <template v-for="(v,i) in tools">
      <button v-if="i!=0" :key="i" :class="['btn','iconfont',v.icon,v.isActive?'active':'']"
        @click="taggleTool(i)">
        {{ v.txt }}
      </button>
    </template>
  </div>
</template>

<script>
import { emoji,ruleStr,emojiReplace,ruleImg,imgReplaceEmoji } from '../../assets/emoticon.js';

import { mapState, mapMutations } from 'vuex';
export default {
  components:{},
  computed:{
    ...mapState([]),
  },
  props:{
    tools:{
      type:Array,
      default:function(){return []}
    }
  },
  data(){
    return {
      emojiShow:true,
      emojiList:emoji.list,//表情列表
    }
  },
  methods:{
    empty(){},
    taggleTool( idxLibs ){
      this.tools.forEach((v,i)=>{v.isActive = ( idxLibs === i );})
      let msgType  = this.tools.find((v)=>{return v.isActive}).msgType
    },//来自子组件切换工具的方法
    addEmoji(objEmoji){
      let src = objEmoji.img;
      let alt = objEmoji.txt;
      this.$emit('addEmoji',{src,alt})
    },//来自emoji的表情处理,需要作为文本对象传出
  },
  mounted(){
  },
}
</script>
<style lang="less" scoped>
@import url('../../assets/config.less');
@import url('../../assets/style.less');
.tools{
  .btn{
    font-size:14px;
    color:#999;
    &::before{
      font-size: 16px;
      margin-right:0.5em;
    }
    &.active{
      color:@blue;
    }
    &+.btn{
      margin-left:10px;
    }
  }
}
.emojiShow{
  line-height:0;
  .img-box{
    display: inline-block;
    line-height:unit((26*1),px);
    width:26px;height:26px;
    border:1px solid #eee;
  }
}
</style>